<template>
  <div class="app-container">
    <div style="margin-bottom: 20px;">
      <el-input v-model="listQuery.keyword" placeholder="请输入用户名/手机号/用户昵称" style="width: 300px;" class="filter-item" clearable @keyup.enter.native="handleFilter" />
      <el-date-picker
        v-model="timeCondition"
        type="datetimerange"
        align="right"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']"
        value-format="timestamp"
        @change="timeChangeHandle"
      />
      <label class="form-key" style="margin-left: 20px;">区域范围：</label>
      <el-cascader
        size="large"
        :options="areaOptions"
        style="width:240px"
        @change="areaChange"
      />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 20px;" @click="handleFilter">
        查询
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      :element-loading-text="g.loadingStr"
      :header-cell-style="{background:g.mainColor}"
    >
      <el-table-column label="序号" align="center" width="100" fixed>
        <template slot-scope="{$index}">
          <span>{{ $index + 1 + ( listQuery.currentPage - 1 ) * listQuery.pageSize }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户名" align="center">
        <template slot-scope="{row}">
          <span>{{ row.realName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户昵称" align="center">
        <template slot-scope="{row}">
          <span>{{ row.nickName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="认证手机号" align="center">
        <template slot-scope="{row}">
          <span>{{ row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="城市" align="center">
        <template slot-scope="{row}">
          <span>{{ row.address || '' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="注册方式" align="center" width="120px">
        <template slot-scope="{row}">
          <span>{{ row.registerType | registerType }}</span>
        </template>
      </el-table-column>
      <el-table-column label="注册时间" align="center">
        <template slot-scope="{row}">
          <span>{{ row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="消费金额" align="center" width="120px">
        <template slot-scope="{row}">
          <span>{{ row.consumptionMoney }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单数量" align="center" width="120px">
        <template slot-scope="{row}">
          <span>{{ row.orderNum }}</span>
        </template>
      </el-table-column>
      <el-table-column label="钱包余额" align="center" width="120px">
        <template slot-scope="{row}">
          <span>{{ row.balance }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="120px">
        <template slot-scope="{row}">
          <span>{{ row.status == 0 ? "禁用" : "启用" }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="推广操作" align="center" width="360px">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleDetail(row)">查看</el-button>
          <el-button type="success" size="mini" @click="getPromotionCode(row)">推广码</el-button>
          <el-button type="warning" size="mini" @click="getPromotionLists(row)">推广列表</el-button>
          <el-tooltip class="item" effect="light" :content="row.status == 0?'允许用户登录':'禁止用户登录'" placement="top-start">
            <el-button type="danger" size="mini" @click="handleUpdate(row,$index)"> {{ row.status == 0?'解锁':'锁定' }} </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="getList" />

    <el-dialog
      title="详细信息"
      :visible.sync="dialogVisible"
      width="80%"
    >
      <div>
        <el-row :gutter="20">
          <el-col :span="24"><div class="grid-content"><label class="header">用户信息</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">用户ID</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ userInfo['id'] }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">用户名</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ userInfo['realName'] }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">手机号</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ userInfo['phone'] }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">性别</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ userInfo['sex'] === 1 ? "男" : "女" }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">个性签名</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ userInfo['signature'] }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">居住城市</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ userInfo['city'] }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">注册时间</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ userInfo['createTime'] | parseTime('{y}-{m}-{d} {h}:{i}') }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">注册方式</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ userInfo['registerType'] | registerType }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">收货地址</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ userInfo['address'] }}</label></div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-table
            :key="detailTableKey"
            v-loading="detailListLoading"
            :data="detailList"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :element-loading-text="g.loadingStr"
            :header-cell-style="{background:g.mainColor}"
          >
            <el-table-column label="订单编号" align="center" fixed>
              <template slot-scope="{row}">
                <span>{{ row.id }}</span>
              </template>
            </el-table-column>
            <el-table-column label="用户名" align="center">
              <template slot-scope="{row}">
                <span>{{ row.studentName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="订单金额" align="center">
              <template slot-scope="{row}">
                <span>{{ row.commodityAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="优惠金额" align="center">
              <template slot-scope="{row}">
                <span>{{ row.preferentialAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="实付金额" align="center" width="120px">
              <template slot-scope="{row}">
                <span>{{ row.paidInAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="提交时间" align="center">
              <template slot-scope="{row}">
                <span>{{ row.paymentTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="支付方式" align="center" width="120px">
              <template slot-scope="{row}">
                <span>{{ row.paymentType | orderPayType }}</span>
              </template>
            </el-table-column>
            <el-table-column label="订单状态" align="center" width="120px">
              <template slot-scope="{row}">
                <span>{{ row.paymentStatus | orderType }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="160px">
              <template slot-scope="{row}">
                <el-button type="primary" size="mini" @click="handleOrderDetail(row)">
                  查看订单
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination v-show="detailTotal>0" :total="detailTotal" :page.sync="detailListQuery.currentPage" :limit.sync="detailListQuery.pageSize" @pagination="getDetailList" />
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="详细信息"
      :visible.sync="dialogVisibleDetailInfo"
      width="1000px"
    >
      <div v-if="detailInfo !== null">
        <el-row :gutter="20">
          <el-col :span="24"><div class="grid-content"><label class="header">订单信息</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">订单编号</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['order']['id'] }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">创建时间</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['order']['createTime'] | parseTime('{y}-{m}-{d} {h}:{i}') }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">付款方式</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['order']['paymentType'] | orderPayType }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">付款人名称</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['order']['paymentAccountName'] }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">支付时间</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['order']['paymentTime'] | parseTime('{y}-{m}-{d} {h}:{i}') }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">付款人手机号</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['order']['paymentPhone'] }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">订单状态</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['order']['paymentStatus'] | orderType }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">订单来源</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['order']['orderSource'] === 1 ? '线上' : '线下' }}</label></div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24"><div class="grid-content"><label class="header">商品信息</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">商品图</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><img class="value-img" :src="detailInfo['order']['commodityImg']" alt=""></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">商品名称</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['order']['setMealName'] }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">商户机构</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['order']['businessName'] }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">机构地址</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['order']['addressDetail'] }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">套餐金额</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['priceInfo']['commodityTotal'] }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">机构优惠金额</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['priceInfo']['businessDiscountAmount'] }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">平台优惠金额</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['priceInfo']['platformDiscountAmount'] }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">实付金额</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['priceInfo']['paidInAmount'] }}</label></div></el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisibleDetailInfo = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 推广码 -->
    <el-dialog title="推广码" :visible.sync="qrDialog" width="600px">
      <el-row type="flex" justify="center">
        <el-image class="qrcode-img" :src="qrCodeUrl" />
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="qrDialog = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 推广列表 -->
    <el-dialog title="推广列表" :visible.sync="pomotionListsDialog" width="1000px">
      <el-date-picker
        v-model="paramsQuery.startDate"
        type="date"
        value-format="timestamp"
        placeholder="开始日期"
        @change="getPromotionListsData()"
      />
      <el-date-picker
        v-model="paramsQuery.endDate"
        type="date"
        value-format="timestamp"
        placeholder="结束日期"
        @change="getPromotionListsData()"
      >
        <el-button type="primary" size="mini" @click="getPromotionListsData()">搜索</el-button>
      </el-date-picker>
      <el-table :data="pomotionLists" style="width: 100%">
        <el-table-column label="头像">
          <template slot-scope="{row}">
            <img :src="row.avatar" style="width:100px;Object-fit:cover">
          </template>
        </el-table-column>
        <el-table-column label="昵称" align="center">
          <template slot-scope="{row}">
            <span>{{ row.nickName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="性别" align="center">
          <template slot-scope="{row}">
            <span>{{ row.sex===1?'男':'女' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系方式" align="center">
          <template slot-scope="{row}">
            <span>{{ row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="地址" align="center">
          <template slot-scope="{row}">
            <span>{{ row.address }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="pomotionTotal>0" :total="pomotionTotal" :page.sync="paramsQuery.currentPage" :limit.sync="paramsQuery.pageSize" @pagination="getPromotionListsData()" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClosePomotionDialog">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { regionDataPlus, CodeToText } from 'element-china-area-data'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { userList, userStatus, userDetail, userOrderList } from '@/api/account'
import { orderDetail } from '@/api/order'
import { QRcode } from '@/api/account'
export default {
  name: 'UserList',
  directives: { waves },
  components: { Pagination },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        currentPage: 1,
        pageSize: 10,
        keyword: '',
        province: '',
        city: '',
        region: '',
        town: '',
        startDate: '',
        endDate: ''
      },
      timeCondition: '',
      areaOptions: regionDataPlus,

      dialogVisible: false,
      userInfo: {},
      detailTableKey: 0,
      detailList: null,
      detailTotal: 0,
      detailListLoading: true,
      detailListQuery: {
        currentPage: 1,
        pageSize: 10,
        accountId: ''
      },

      dialogVisibleDetailInfo: false,
      detailInfo: null,
      qrDialog: false,
      qrCodeUrl: '',
      paramsQuery: {
        currentPage: 1,
        pageSize: 10,
        keyword: '',
        province: '',
        city: '',
        region: '',
        town: '',
        startDate: '',
        endDate: '',
        parentId: ''
      },
      pomotionListsDialog: false,
      pomotionLists: [],
      pomotionTotal: 0
    }
  },
  created() {
  },
  mounted() {
    this.getList()
  },
  methods: {
    timeChangeHandle() {
      if (this.timeCondition) {
        this.listQuery.startDate = this.timeCondition[0]
        this.listQuery.endDate = this.timeCondition[1]
        this.getList()
      } else {
        this.listQuery.startDate = ''
        this.listQuery.endDate = ''
        this.getList()
      }
    },
    getDetailList() {
      this.detailListLoading = true
      userOrderList(this.detailListQuery).then(response => {
        console.log(response.data)
        this.detailList = response.data.records
        this.detailTotal = response.data.total
        this.detailListLoading = false
      })
    },
    getList() {
      this.listLoading = true
      this.listQuery['province'] = this.listQuery['province'] === '全部' ? '' : this.listQuery['province']
      userList(this.listQuery).then(response => {
        this.list = response.data.records
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.currentPage = 1
      this.getList()
    },
    areaChange(value) {
      const provinces = CodeToText[value[0]]
      const city = CodeToText[value[1]]
      const region = CodeToText[value[2]]
      const town = CodeToText[value[3]]
      this.listQuery.province = provinces
      this.listQuery.city = city === undefined || city === '全部' ? '' : city
      this.listQuery.region = region === undefined || region === '全部' ? '' : region
      this.listQuery.town = town === undefined || town === '全部' ? '' : town
      console.log(this.listQuery)
    },
    handleDetail(row) {
      this.dialogVisible = true

      userDetail({
        id: row['id']
      }).then(response => {
        this.userInfo = response.data

        this.detailListQuery.accountId = row['id']
        this.getDetailList()
      })
    },
    handleUpdate(row, index) {
      this.$confirm('是否确认' + (this.list[index]['status'] === 0 ? '解锁' : '锁定') + '该用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(JSON.stringify(this.multipleSelection))
        userStatus({
          id: row['id'],
          status: 1 - this.list[index]['status']
        }).then(response => {
          this.$message({ message: '操作成功', type: 'success' })
          this.list[index]['status'] = 1 - this.list[index]['status']
        })
      })
    },
    handleOrderDetail(row) {
      console.log(row)
      this.dialogVisibleDetailInfo = true
      orderDetail({ id: row['id'] }).then(response => {
        const data = response.data
        this.detailInfo = data
      })
    },
    getPromotionLists(row) {
      this.paramsQuery.parentId = row.id
      this.getPromotionListsData()
    },
    handleClosePomotionDialog() {
      this.paramsQuery.startDate = ''
      this.paramsQuery.endDate = ''
      this.pomotionListsDialog = false
    },
    getPromotionListsData() {
      userList(this.paramsQuery).then(response => {
        const { records, total } = response.data
        this.pomotionTotal = total
        this.pomotionLists = records
        this.pomotionListsDialog = true
      })
    },
    async getPromotionCode(row) {
      const res = await QRcode({
        id: row.id,
        pagesPath: `pages/home/home`
      })
      const data = res.data
      if (!data) return
      if (data instanceof Object) {
        this.qrCodeUrl = data.qrcodeImg
      } else {
        this.qrCodeUrl = data
      }
      this.qrDialog = true
    }
  }
}
</script>

<style lang="scss">
  $rowHeight:36px;
  $headerHeight:40px;
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: $rowHeight;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .header {
    height: $headerHeight;
    line-height: $headerHeight;
    display: block;
    font-size: 18px;
    text-align: center;
  }
  .key {
    display: block;
    line-height: $rowHeight;
    font-weight: 400;
    text-align: right;
  }
  .value {
    display: block;
    line-height: $rowHeight;
    font-weight: 400;
  }
  .value-img {
    width: 280px;
    height: 280px;
  }
</style>
